<template>
  <div class="mpmp">
      <van-sticky>
          <div class="top">
          <span class="iconfont icon-xiangzuo" @click="pot()"></span>
          <div class="io">
              <van-icon name="like-o" class="nn" @click="shou()" />
              <!-- <span class="iconfont icon-shoucang1" ></span> -->
              <div class="ii">
                  
                  <van-cell class="iconfont icon-fenxiang4"  @click="showShare = true" />
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
              </div>
            
          </div>
      </div>
        
      </van-sticky>
      <!-- <Lunbo/> -->
      <Det v-for="(v,i) in arr" :key="i" :cakename="v.cakename" :cakeimage="v.cakeimage" :cakebrief="v.cakebrief" :cakeprice="v.cakeprice" :cakeoriginal="v.cakeoriginal" :cakescore="v.cakescore" :scorenum="v.scorenum" :brandname="v.brandname" :brandimg="v.brandimg" :bimg="v.bimg" :goodsid="v.goodsid"/>
             <div class="bot">
                 <div class="zi">
                     <span class="iconfont icon-line"></span>咨询
                 </div>
                 <div class="buy" @click="fun()">
                     立即订购
                 </div>
                 <van-action-sheet v-model="show" title="标题">
                    <div class="content">
                        <van-sku
                            v-model="show"
                            :sku="sku"
                            :goods="goods"
                           
                            :message-config="messageConfig"
                            @buy-clicked="onBuyClicked"
                            @add-cart="onAddCartClicked"
                        />
                    </div>
                </van-action-sheet>
             </div>
 </div>
</template>

<script>
import Vue from 'vue';
import {Dialog} from 'vant';
import { Toast } from 'vant';

Vue.use(Toast);

import Det from "c/cakeC/det.vue"
// import Lunbo from "c/lunbo.vue";
import {getlink} from "@/api/getapi"
import {postlink} from "@/api/postlink"
export default {
  components: {
    Det,
    [Dialog.Component.name]: Dialog.Component,
    },
    //  Lunbo,
  
  data(){
    return{
      arr:[
       
      ],
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
            show: false,
            shows: false,
            showShare: false,
            sku: {
                tree: [
                    {
                    k: '颜色', // skuKeyName：规格类目名称
                    k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    v: [
                        {
                        id: '1', // skuValueId：规格值 id
                        name: '6寸', // skuValueName：规格值名称
                        imgUrl: 'https://brup.shengri.cn/goods/2020/06/FnIxCTRajx4g-7qq4b-NEP2tpyFb.jpg-wm', // 规格类目图片，只有第一个规格类目可以定义图片
                        previewImgUrl: 'https://brup.shengri.cn/goods/2020/06/FnIxCTRajx4g-7qq4b-NEP2tpyFb.jpg-wm', // 用于预览显示的规格类目图片
                        },
                        // {
                        // id: '1',
                        // name: '8寸',
                        // imgUrl: 'https://brup.shengri.cn/goods/2020/06/FiaJjeO2fiA3hf9WsMF1Odw022ZA.jpg-wm',
                        // previewImgUrl: 'https://brup.shengri.cn/goods/2020/06/FiaJjeO2fiA3hf9WsMF1Odw022ZA.jpg-wm',
                        // }
                    ],
                    largeImageMode: true, //  是否展示大图模式
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                    id: 2259, // skuId
                    s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                    s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                    price: 29800, // 价格（单位分）
                    stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '298.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                    // 商品留言
                    datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                    multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                    name: '留言', // 留言名称
                    type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                    required: '1', // 是否必填 '1' 表示必填
                    placeholder: '' // 可选值，占位文本
                    }
                ],
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
            // 默认商品 sku 缩略图
                picture: 'https://brup.shengri.cn/goods/2020/06/FnIxCTRajx4g-7qq4b-NEP2tpyFb.jpg-wm'
            },
            messageConfig: {
                // 数据结构见下方文档
                // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
            uploadImg: () => {
                return new Promise((resolve) => {
                setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
                });
            },
            // 最大上传体积 (MB)
            uploadMaxSize: 3,
            // placeholder 配置
            placeholderMap: {
                text: 'xxx',
                tel: 'xxx',
                
            },
            // 初始留言信息
            // 键：留言 name
            // 值：留言内容
            initialMessages: {
                留言: '留言信息'
            }
            },
            skuData: {
                // 商品 id
                goodsId: '946755',
                // 留言信息
                messages: {
                    message_0: '12',
                    message_1: ''
                },
                // 另一种格式的留言，key 不同
                cartMessages: {
                    '留言1': 'xxxx'
                },
                // 选择的商品数量
                selectedNum: 1,
                // 选择的 sku 组合
                selectedSkuComb: {
                    id: 2257,
                    price: 100,
                    s1: '30349',
                    s2: '1193',
                    s3: '0',
                    stock_num: 111,
                    properties: [
                    {
                        k_id: 123,
                        k: '加料',
                        is_multiple: true,
                        v: [
                        {
                            id: 1223,
                            name: '椰果',
                            price: 1
                        }
                        ]
                    }
                    ],
                    property_price: 1
                },
            },
         
     
    }
  },
  methods:{
      onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        shou(){
             if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
             let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }
        }
        else{
              postlink("http://180.76.121.47:8008/collect").then((ok)=>{
               console.log(ok)
               this.$toast({
                message: '恭喜，收藏成功',
                position: 'bottom',
            })
            })  
        }
            // this.$toast({
            //     message: '恭喜，收藏成功',
            //     position: 'bottom',
            // });
        },
        pot(){
            this.$router.go(-1)
        },
     fun(){
            this.show = true;
        },
        // onSelect(option) {
        //     Toast(option.name);
        //     this.showShare = false;
        // },
        showPopup() {
            this.shows = true;
        },
       onBuyClicked(){
          if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
              let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }
        }else{
        //       postlink("http://180.76.121.47:8008/addgoods?token="+window.localStorage.getItem("token"),{goodsid:this.$route.query.goodsid,goodscount:1}).then((ok)=>{
        //    console.log(ok+"haha")
           this.$router.push("/Shopingcar");
          
            }
            // )
              
            },
           
        // },
        onAddCartClicked(){
          if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
             let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }
        }else{
        //       postlink("http://180.76.121.47:8008/addgoods?token="+window.localStorage.getItem("token"),{goodsid:this.$route.query.goodsid,goodscount:1}).then((ok)=>{
        //    console.log(ok+"haha")
           this.$router.push("/Shopingcar");
        }
        // )
       }
       },  
    // },
 created(){
   getlink("http://180.76.121.47:8008/cake").then((ok)=>{
    //  console.log(ok)
     ok.data.data.forEach((v)=>{
       if(v.goodsid==this.$route.query.goodsid){
         this.arr.push(v)
       }
     })
    //  this.arr=ok.data.data
   })
 },
  
};


</script>

<style scoped>

.bot{
    width: 100%;
    display: flex;
    line-height: 0.45rem;
     font-size: 0.14rem;
     position: fixed;  
     bottom: 0;
}
.zi .iconfont{
    color: turquoise;
    margin-right: 0.05rem;
    margin-left: 0.02rem;
    font-size: 0.2rem;
}
.zi{
    width: 30%;
    background-color: white;
}
.buy{
    width: 70%;
    text-align: center;
    background-color: red;
    color: white;
    font-size: 0.14rem;
}
 .top{
        width: 100%;
        height: 0.4rem;
        background-color: white;
        display: flex;
        justify-content: space-between;
        line-height: 0.4rem;
    }
    .top span{
        font-size: 0.2rem;
        color: brown;   
        text-align: center;
    }
    .io{
        display: flex;
        justify-content: space-between;
    }
   .nn{
       font-size:0.2rem;
       color: brown;   
        text-align: center;
        margin-top: 0.1rem;
   }
    .top>.nn{
        margin-left: 0.1rem;
    }
    .io .nn{
        margin-right: 0.1rem;
    }
    .ii{
        color: brown;
    }
    .van-cell{
        color: brown;
        background-color: rgba(0, 0, 0, 0.01);
    }
    .top .iconfont icon-xiangzuo{
        margin-left: 0.1rem;
    }
</style>